<template>
  <div>
    <GlobalLoading />
    <router-view></router-view>
    <serviceDrag @artificial="goArtificial" @coordinate="clientXY" ref="serviceDrag"/>
    <serviceHelp :clientX="x" :clientY="y" @close="close" v-if="showHelp"></serviceHelp>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ElMessage } from 'element-plus'

const showHelp = ref(false)
const x = ref(0)
const y = ref(0)

// 暗黑模式
let html = document.documentElement
html.className = 'dark'

// 客服精灵
const goArtificial = (value: any) => {
  // ElMessage.warning(value)
  setTimeout(() => {
    showHelp.value = true
  }, 500)
}

const clientXY = (xValue: any, yValue: any) => {
  x.value = xValue + 50
  y.value = yValue + 50
}

const close = () => {
  showHelp.value = false
}

</script>


<style scoped></style>

<style>
  .my-confirm-button {
    color: #fff;
    font-size: 18px;
    border: 1px solid #f8d447;
    border-radius: 15px;
    background: linear-gradient(180deg, #102657 0%, #1b3870 100%);
  }
</style>
